<template>
	<view class="mar_top30 pad_right20" v-for="(item,index) in criticList" :key="index">
		<view class="flex justify-between">
			<!-- {{criticList}} -->
			<view @longpress="onLongpress(item)" @click="onReplyComments(item)" class="flex">
				<view class="head-portrait mar_right15">
					<image :src="item.authorUserProfile" mode="aspectFill"></image>
				</view>
				<view class="mar_bottom20">
					<view class="flex align-center mar_bottom10">
						<text class="color_6D6D6D fontS26">{{item.authorNickname}}</text>
						<image class="width_14 height_14 margin_l_r15" src="/static/image/icon/arrow_r.png" mode="">
						</image>
						<text class="color_6D6D6D fontS26">{{item.replyToUserNickname}}</text>
					</view>
					<view class="color_222222 fontS28">{{item.content}}</view>
					<view class="flex align-center mar_top20">
						<text class="fontS24 color_6D6D6D">{{timeago(item.createTime)}}</text>
						<text class="fontS24 color_222222 mar_left30">回复</text>
					</view>
				</view>
			</view>
			<view @tap="onLike(item)" class="flex">
				<image class="width_40 height_40 mar_right8"
					:src="`/static/image/icon/like${item.liked?'_active':''}.png`" mode="">
				</image>
				<text class="color_222222 fontS24">{{ item.likes }}</text>
			</view>
		</view>
		<template v-if="item.subComments && item.subComments.length > 0">
			<commentList v-for="(child,index_) in item.subComments" :key="index_" :criticList="child"></commentList>
		</template>
	</view>
</template>

<script setup>
	import commentList from '@/components/commentList/commentList.vue';
	import {
		ref,
		watch
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		timeago
	} from "@/utils/common.js"

	// const props = defineProps({
	// 	criticList: {
	// 		type: Array,
	// 		default: []
	// 	}
	// })

	const props = defineProps(['criticList'])

	watch(props.criticList, (val) => {
		console.log(val, 'val')
	})

	const emit = defineEmits(['onReplyComments', 'onLongpress', 'onLike'])

	const onReplyComments = (el) => {
		emit('onReplyComments', el)
	}

	const onLongpress = (el) => {
		emit('onLongpress', el)
	}

	const onLike = (el) => {
		emit('onLike', el)
	}
</script>

<style lang="scss" scoped>
	.head-portrait {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;

		image {
			width: inherit;
			height: inherit;
			border-radius: inherit;
		}
	}
</style>